import {useState} from 'react';
import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {DateInput} from './DateInput.tsx';

<Meta
  title="Components/Inputs/Date input"
  component={DateInput}
  argTypes={{
    readOnly: {
      control: {type: 'boolean'},
      description:
        'Defines if the input should be read only. If defined so, the user cannot change the value of the input.',
      table: {type: {summary: 'boolean'}},
    },
    onChange: {
      description: 'The handler called when the value of the input changes.',
      table: {type: {summary: '(newValue: string) => void'}},
    },
  }}
  args={{
    value: '',
  }}
/>

# DateInput (Beta)

## Usage

Date input allows the user to enter content and data when the expected user input is a date.


## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      const [value, setValue] = useState(args.value);
      return <DateInput {...args} value={value} onChange={setValue} />;
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Variation on readOnly

<Canvas>
  <Story name="Read only">
    {args => {
      return (
        <>
          <DateInput {...args} readOnly={false} />
          <DateInput {...args}  readOnly={true} />
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on invalid

<Canvas>
  <Story name="Invalid">
    {args => {
      return (
        <>
          <DateInput {...args}  invalid={false} />
          <DateInput value="not a date" invalid={true} />
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on HTML props (max, min)

<Canvas>
  <Story name="HTML props (max, min)">
    {args => {
      return (
        <>
          <DateInput {...args}  min="1955-11-05" max="1985-11-05" />
        </>
      );
    }}
  </Story>
</Canvas>
